<div class="list-container">
  <div class="row m-0 list-header">
    <div class="col-10 p-0">
      <h2>Products</h2>
    </div>
    <div class="col-2 p-0 float-right text-right">
      <%= link(raw("<i class='fas fa-plus'></i> Add a Product"), to: "/product/category", class: "btn btn-primary")%>
      <!-- <%= link(raw("<i class='fas fa-plus'></i> Etsy Import"), to: "/product/import/etsy", class: "btn btn-primary")%> -->
    </div>
  </div>
  <div class="row m-0 list list-extra">
    <div class="col-9">
      <div class="row">
        <div class="dropdown-selectall btn btn-outline-secondary">
          <div class="row m-0">
            <div class="checkbox">
              <label>
              <input type="checkbox" value="">
              <span class="cr"><i class="cr-icon fa fa-check"></i></span>
              </label>
            </div>
            <span class="dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
        <div class="col p-0">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-secondary">Renew</button>
            <button type="button" class="btn btn-outline-secondary">Deactivate</button>
            <button type="button" class="btn btn-outline-secondary">Delete</button>
          </div>
          <!--<div class="btn-group mx-2 edit-option">
            <button class="btn btn-outline-secondary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Editing Options
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div> -->
        </div>
      </div>
      <div class="panel-group mt-3">
        <div class="row">
          <%= for item <- @products do %>
          <div class="col-3 px-2 pb-3 m-0">
            <div class="card p-0">
              <%= img_tag(get_product_display_image(item), class: "card-img-top") %>
              <div class="card-body">
                <h5 class="card-title">  <%= item.name %></h5>
                <div class="card-text">
                  <%= if has_variants(item) do %>
                  <div class="variants">
                    <span >  <%= item.variants |> length %> Variants </span>
                  </div>
                  <% else %>
                  <div class="variants">
                    <span>  </span>
                  </div>
                  <% end %>
                </div>
                <div class="card-footer">
                  <div class="row">
                    <div class="checkbox col-4 pl-4 mt-1">
                      <label>
                      <input type="checkbox" value= <%="#{item.id}" %> id=<%="product_#{item.id}" %> >
                      <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                      </label>
                    </div>
                    <div class="col-4">
                      <i class="fa fa-star"></i>
                    </div>
                    <div class="dropdown col-4 p-0 float-right">
                      <a class="p-2 dropdown-toggle options" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-cog"></i>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right">
                        <%= link("Edit", to: product_path(@conn, :edit, item.id, "product": @conn.query_params |> Map.take(["rummage"])), class: "dropdown-item") %>
                        <%= if item.state in [:in_active, :draft] do %>
                          <%= link("Activate", to: product_path(@conn, :update, item.id, "product": @conn.query_params |> Map.take(["rummage"]) |> Map.merge(%{"state": :active, "id": item.id})), method: :patch, class: "dropdown-item")%>
                        <% else %>
                          <%= link("Deactivate", to: product_path(@conn, :update, item.id, "product": @conn.query_params |> Map.take(["rummage"]) |> Map.merge(%{"state": :in_active, "id": item.id})), method: :patch, class: "dropdown-item")%>
                        <% end %>
                        <%= link("Delete", to: product_path(@conn, :delete, item.id, @conn.query_params), method: :delete, data: [confirm: "Are you sure?"], class: "dropdown-item") %>
                      </div>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel-collapse collapse" id="<%= item.id %>">
              <div class="panel-body" style="margin-right: 1rem">
                <%= for variant <- item.variants do %>
                  <div class="d-flex flex-row align-items-center" style="border: 1px solid #ddd; border-radius: 2px">
                    <div class="p-2">
                      <img src="/images/empty-img.png" height="100px" >
                      <a href="#"><%= variant.name %></a>
                    </div>
                    <div class="p-2" style="margin-left: auto">
                      <%= link("Edit", to: product_path(@conn, :edit, variant.id, "prototype_id": 1), class: "btn btn-primary")%>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
          <% end %>
        </div>
      </div>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-outline-secondary col-12">Quick Edit</button>
      <form>
        <div class="form-group mt-3">
          <label>Sort</label>
          <select class="form-control" id="product-sort-select">
            <option value=<%= (@conn |> make_sort_query_string("name", "asc"))%><%= selected_option(@conn, "name", "asc", "selected") %> >
              Name: A to Z
            </option>
            <option value=<%= (@conn |> make_sort_query_string("name", "desc"))%><%= selected_option(@conn, "name", "desc", "selected") %> >
              Name: Z to A
            </option>
            <option value=<%= (@conn |> make_sort_query_string("updated_at", "desc"))%><%= selected_option(@conn, "updated_at", "desc", "selected") %> >
              Updated: latest to oldest
            </option>
            <option value=<%= (@conn |> make_sort_query_string("updated_at", "asc"))%><%= selected_option(@conn, "updated_at", "asc", "selected") %> >
              Updated: oldest to latest
            </option>
          </select>
        </div>
        <div class="col-sm-12 p-0">
          <label>Listing status</label>
          <div class="radio">
            <label>
                <input type="radio" id="product-listing-draft" name="o3" value=<%= @conn |> make_search_query_string("state", "where", "eq", "draft") %> id="product-listing-draft-radio" <%= selected_radio(@conn, "draft", "checked") %>>
                <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                Draft
            </label>
          </div>
          <div class="radio">
            <label>
                <input type="radio" id="product-listing-active" name="o3" value=<%= @conn |> make_search_query_string("state", "where", "eq", "active") %> id="product-listing-active" <%= selected_radio(@conn, "active", "checked") %>>
                <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                Active
            </label>
          </div>
          <div class="radio">
            <label>
                <input type="radio" id="product-listing-inactive" name="o3" value=<%= @conn |> make_search_query_string("state", "where", "eq", "in_active") %> id="product-listing-inactive" <%= selected_radio(@conn, "in_active", "checked") %>>
                <span class="cr"><i class="cr-icon fa fa-circle"></i></span>
                In-Active
            </label>
          </div>
          <div class="dropdown col-4 p-0">
            <a class="p-2 btn btn-secondary btn-outline-secondary dropdown-toggle options" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Export Products
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <%= link("CSV", to: product_path(@conn, :export_product, %{"format" => "csv"}), class: "dropdown-item")%>
              <%= link("XLSX", to: product_path(@conn, :export_product, %{"format" => "xlsx"}), class: "dropdown-item")%>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
